<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <link rel="SHORTCUT ICON" href="favicon.ico">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" >
    <title>管理 | 品格图床 | 免登陆图床</title>
    <link rel="shortcut icon" href="favicon.ico">

    <!-- 新 Bootstrap4 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">

    <script src="js/jquery.min.js"></script>

    <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script src="js/axios.min.js"></script>
    <script src="js/admin/admin.js"></script>
    <script src="js/bs4.pop.js"></script>

    <link rel="stylesheet" href="css/main.css" >
    <link rel="stylesheet" href="css/admin/admin.css" >
    <link rel="stylesheet" href="css/bs4.pop.css">

    <style>
        .switch {float: right;}
        .switch .box{width:40px;height:20px;background:#ccc;border-radius:20px;transition: all .5s ease;}
        .switch input{display:none;}
        .switch .box span{display:inline-block;height:20px;width:20px;border-radius:15px;background:#fff;transform:translateX(-10px);transition: all .5s ease;}
        .switch-on .box{background:forestgreen;transition: all .5s ease;}
        .switch-on .box span{transform:translateX(10px);transition: all .5s ease;}
    </style>

</head>
<body>

    <script>
        $(function () {
            var width = document.body.clientWidth;
            if (width < 800) {
                $(".cover-container").css("width", "80%");
                var widthed = width*0.8;
                var cadWidth = 350;
                var left = (widthed - cadWidth)/2;
                $(".login-wrapper").css("left", left);
                $(".admin-wrapper").css("left", left);
            }
        });
    </script>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="container">
            <a class="navbar-brand" href="/"><img src="favicon.ico" style="height: 25px">&nbsp;品格图床</a>

            <button id="toggler-navbar" class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
                <span class="navbar-toggler-icon"></span>
            </button>


            <div class="collapse navbar-collapse" id="collapsibleNavbar">
                <ul class="navbar-nav">
                    <li class="nav-item"><a class="nav-link" href="/">上传</a></li>
                    <li class="nav-item"><a class="nav-link" href="/history">历史</a></li>
                    <li class="nav-item active"><a class="nav-link" href="/admin">管理</a></li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="site">
        <div class="site-inner">
            <div class="cover-container" style="position: relative">
                <div class="login-wrapper">
                    <div class="login">
                        <div style="margin-top: 50px">
                            <h1 class="title">Administrator</h1>
                            <!--                        <p class="notice">您的密码还未设置，请在Config.ini文件内设置密码，否则无法登录</p>-->
                        </div>
                        <div><input id="login-password" type="password" class="form-control"></div>
                        <div><button onclick="login()" type="button" class="btn btn-primary" style="width: 100px">登录</button></div>
                    </div>
                </div>

                <script>
                    axios.get('/api/isLogin')
                        .then(function (response) {
                            if (response.data) {
                                var list = ["anonymous", "imageUploadCount", "size", "password", "version"];
                                overturn();
                                $.each(list, function (i, value) {
                                    axios.get('/api/getConf', {
                                        params: {
                                            "conf": value
                                        }
                                    })
                                        .then(function (response) {
                                            if (i == 0) {
                                                if (response.data.value == "true") {
                                                    $(".switch").toggleClass("switch-on");
                                                    $("#turn").attr("checked", true);
                                                }
                                            }
                                            $("#" + response.data.conf).val(response.data.value);
                                        })
                                });
                            }
                        })
                </script>

                <div class="admin-wrapper">
                    <div class="admin">
                        <div class="anonymous" style="margin-top: 35px; padding-top: 10px">
                            <p>启用匿名用户上传图片</p>
                            <div class="switch">
                                <input type="checkbox" value="" name="" id="turn"/>
                                <div class="box">
                                    <span></span>
                                </div>
                            </div>
                        </div>
                        <div class="imageUploadCount">
                            <div class="input-group mb-3">
                                <div class="input-group-prepend">
                                    <span class="input-group-text" id="basic-addon1">上传图片数量</span>
                                </div>
                                <input type="text" class="form-control" id="imageUploadCount" aria-describedby="basic-addon1">
                                <div class="input-group-append">
                                    <span class="input-group-text">张</span>
                                </div>
                            </div>
                        </div>
                        <div class="size">
                            <div class="input-group mb-3">
                                <div class="input-group-prepend">
                                    <span class="input-group-text" id="basic-addon2">服务器剩余容量</span>
                                </div>
                                <input type="text" class="form-control" id="size" aria-describedby="basic-addon2">
                                <div class="input-group-append">
                                    <span class="input-group-text">GB</span>
                                </div>
                            </div>
                        </div>
                        <div class="password">
                            <div class="input-group mb-3">
                                <div class="input-group-prepend">
                                    <span class="input-group-text" id="basic-addon3">密码</span>
                                </div>
                                <input type="password" class="form-control" id="password" aria-describedby="basic-addon3">
                            </div>
                        </div>
                        <div class="version">
                            <div class="input-group mb-3">
                                <div class="input-group-prepend">
                                    <span class="input-group-text" id="basic-addon4">当前图床版本</span>
                                </div>
                                <input type="text" class="form-control" id="version" aria-describedby="basic-addon4">
                            </div>
                        </div>

                        <div class="func">
                            <button class="btn btn-primary" onclick="logout()">注销</button>
                            <button class="btn btn-success" onclick="changeConf()">修改</button>
                            <button class="btn btn-danger" onclick="reload()">重载</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        var box = $(".switch");
        var checkbox = $("#turn");
        box.click(function () {
            box.toggleClass("switch-on");

            if (checkbox.is(":checked")) {
                checkbox.attr("checked", false);
                console.log("已取消");
            } else {
                checkbox.attr("checked", true);
                console.log("已选中");
            }
        });
    </script>

</body>
</html>